main.authPage {
  @apply py-[1rem] flex justify-center items-center;

  form.auth {
    @apply bg-inherit px-[1rem] py-[.75rem] rounded-lg
           shadow-2xl border-[1px] border-gray-400/50
           flex flex-col gap-[1rem];

    width: min(100%, 500px);
    min-height: 450px;

    & > h1 {
      @apply text-center text-xl font-bold;

      grid-row: 1 / span 1;
    }

    section.body {
      @apply flex-grow flex flex-col
             gap-[.5rem];

      article.inputRow {
        @apply flex items-center;
        gap: inherit;

        & > input {
          @apply flex-grow outline-none border-none
                 bg-gray-200 px-[.5em] py-[.25em]
                 rounded-md;
        }
      }
    }

    button[type~=submit],
    section.messageDisplay {
      @apply px-[1em] py-[.4em] rounded-md;
    }

    section.messageDisplay {
      &.error {
        @apply bg-red-600 text-white;
      }
    }

    button[type~=submit] {
      @apply bg-blue-800 text-white;

      $anim: .15s ease;
      transition: $anim opacity;

      &:disabled {
        opacity: .5;
      }
    }
  }
}
